<template>
  <div class="hello">
    <h1 class="testclass">{{ msg }}</h1>
    <p>
      <a href="https://gitee.com/chenkeyu333" target="_blank" rel="noopener">author @ cky</a>.
    </p>
    <div>
      <el-button @click="OnInitView" size="mini">初始化视角</el-button>
      <el-button @click="ShowAllImageryLayersRegion" size="mini">打开\关闭图层控制器</el-button>
      <ol class="layersContainer" v-show="ShowOrHideLayersControl">
        <li v-for="(item,index) in layers" :key="index" class="layer" @click="()=>(ShowOrHide(index))"> 
         {{index}}.{{index===0?"卫星影像":"地名图层"}}
        </li>
      </ol>
      <el-button @click="JustifyLower" size="mini">下沉倾斜摄影</el-button>
      <el-button @click="JustifyHigher" size="mini">上抬倾斜摄影</el-button>
      <el-button @click="LookAtChange" size="mini"> 锁定模型视角</el-button>
      <el-button @click="LookAtMC" size="mini"> 解锁模型视角 </el-button>
    </div>   
  </div>

</template>

<script>

import {ref, onMounted } from 'vue'
import {ElButton,ElMessage,ElSwitch} from 'element-plus';

export default {
  name: 'HelloWorld',
  props: {
    msg:String,
  },
  setup(prop,context){
    let ShowOrHideLayersControl = ref(true);
    let layers = ref(["1"]);
    const methods = {
      OnInitView(){
        ElMessage("已切换到地球全局视角");
        context.emit("BackHome",false);
      },
      ControlTextLayer(){
        context.emit("ControlTextLayer")
      },
      ShowAllImageryLayersRegion(){
        ShowOrHideLayersControl.value = !ShowOrHideLayersControl.value;
      },
      JustifyLower(){
        context.emit("JustifyHeight",-5);
      },
      JustifyHigher(){
        context.emit("JustifyHeight", 5);
      },
      ShowOrHide(index){
        layers.value[index].show = !layers.value[index].show;
      },
      LookAtChange(){
        context.emit("LookAtChange");
      },
      LookAtMC(){
        window.viewer.scene.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        ElMessage("已解锁视角");
      }
    };
    const GetLayers = ()=>{
      let interval = setInterval(() => {
        let _layers = window.viewer.imageryLayers._layers;
        //console.log("获取了一次图层")
        if(_layers.length > 0 )
        {
          layers.value = _layers;
          //console.log("拿到图层了",layers)
          clearInterval(interval)
        }
      }, 1500);
    }
    onMounted(()=>{
        GetLayers();
    })
    return{ShowOrHideLayersControl,layers, ...methods}
  },  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 20px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.testclass{
  font-size: 20px;
  color: skyblue;
}

.layersContainer{
  width: 120px;
}

button,
.el-button+.el-button {
   display:block;
   margin-left: 0px; 
}

.layer{
  display: block;
  background-color: rgba(1, 1, 1,0.7);
  color: aliceblue;
  cursor: default;
  height: 32px;
  line-height: 32px;
  margin-bottom: 4px;
}

.layer:hover{
  opacity: 0.5;
}
</style>
